<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作日志</title>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../lib/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/dj01.css">
</head>

<body>
  <div id="mulu">
    <!-- 导航 -->
    <p><span>首页/系统管理/</span>操作日志</p>
    <p>操作日志</p>
  </div>
  <div id="yonghuliebiao">
    <div class="row">
      <div class="col-md-12">
        <div class="container">
          <div>
            <h5>查询条件</h5>
          </div>
          <div>
            <label for="caozuozhanghao"> <span>操作账号:</span></label>
            <input id="caozuozhanghao" class="myinput" type=" text">
            <label for="riqi"><span>日期:</span></label>
            <input id="riqi" class="myinput" type="date"><input type="date">
            <button><span>重置</span></button>
            <button id="query"><span>查询</span></button>
          </div>
        </div>
        <div class="container">
          <div>
            <h5>日志列表</h5>
          </div>
          <div data-toggle='modal' data-target="#delete">
            <button><span class="iconfont icon-shanchu2"></span><span>清除</span></button>
          </div>
          <div>
            <div id="tdheight">
              <table class="table ">
                <thead>
                  <tr>
                    <th><img src="../images/dj/多选框-复选.png" alt=""></th>
                    <th>日志ID</th>
                    <th>操作账号</th>
                    <th>操作时间</th>
                    <th>角色</th>
                    <th>IP地址</th>
                    <th>操作记录</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div id="yema" class="clear">
          <div><span class="iconfont icon-xiangzuo"></span></div>
          <div class="clear" id="pages"></div>
          <div><span class="iconfont icon-xiangyou1"></span></div>
        </div>
        <div id="yeshu">
          <div>共<span id="jilu"></span>条记录,第<span id="dangqian"></span>/<span id="zongyema"></span>页</div>
        </div>
      </div>
    </div>
  </div>
  <!--账号列表-删除-模态框 -->
  <div id="delete" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <h5> <span class="iconfont icon-gaojingshixin"></span>你确认要清除该操作记录吗？</h5>
          <p><span>删除后将无法恢复</span>，你还要继续吗？</p>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="qingchu">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 内容 -->
  <div class="col-md-12">
    <span class="foot1">大健康综合管理后台</span>
    <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
    <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
  </div>
  </div>
  <script src="../JavaScript/index.js"></script>
  <script src="../JavaScript/data.js"></script>
  <script src="../JavaScript/utils.js"></script>
  <script>
    let maxPage;
    let dangqianye = 1;
    let arrdata = [];
    let caozuoData = [];
    $('.myinput').focus(function () {
      $(this).css({ 'outline': '1px solid #1890FF' })
    })
    $('.myinput').blur(function () {
      $(this).css({ 'outline': 'none' })
    })
    getmyData("administratorData", administratorData)
    var newadminData = getmyData("administratorData")
    if (newadminData == null) {
      setmyData("administratorData", administratorData)
      newadminData = getmyData("administratorData")
    }
    function showTable(data) {
      $("#tdheight tbody").html('')
      data.forEach(item => {
        $("#tdheight tbody").append(`
        <tr class="mytr">
          <td><input type="checkbox" class="check"></td>
          <td>${item.logID}</td>
          <td>${item.account}</td>
          <td>${item.actionTime}</td>
          <td>${item.roleName}</td>
          <td>${item.ip}</td>
          <td>${item.action}</td>
        </tr> 
      `)
      });
    }
    // 渲染分页
    function showfenye(yema, data) {
      $("#pages").children().css("backgroundColor", "white")
      $("#pages").children()[yema - 1].style.backgroundColor = "#1890FF"
      let qishi = (yema - 1) * 5
      let arrdata = data.slice(qishi, qishi + 5)
      showTable(arrdata)
      dangqianye = yema
    }
    // 渲染页码
    function showPages(data) {
      $('#pages').html('')
      maxPage = Math.ceil(data.length / 5)
      if (maxPage != 0) {
        for (let i = 1; i <= maxPage; i++) {
          $('#pages').append(`
          <div class="page">${i}</div>
        `)
        }
      } else {
        $('#pages').append(`
          <div class="page">1</div>
        `)
      }
    }
    // 分页绑定点击事件
    $("#pages").on("click", ".page", function () {
      dangqianye = $(this).text()
      showfenye(dangqianye, caozuoData)
    })
    // 上一页绑定点击事件
    $("#pages").prev().click(function () {
      if (dangqianye != 1) {
        dangqianye--
        showfenye(dangqianye, caozuoData)
      }
    })
    // 下一页绑定点击事件
    $("#pages").next().click(function () {
      if (dangqianye != maxPage) {
        dangqianye++
        showfenye(dangqianye, caozuoData)
      }
    })
    // 筛选出被封禁的对象
    function fengjin(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].logID != "") {
          caozuoData.push(data[i])
        }
      }
    }
    fengjin(newadminData)
    showPages(caozuoData)
    showfenye(1, caozuoData)
    $("#jilu").text(caozuoData.length)
    $("#dangqian").text(dangqianye)
    $("#zongyema").text(maxPage)
    // 查询
    $('#query').click(function () {
      $("#tdheight tbody").html('')
      for (let i = 0; i < caozuoData.length; i++) {
        let kaishiTime = $('#riqi').val()
        let jieshuTime = $('#riqi').next().val()
        if (caozuoData[i].account == $('#caozuozhanghao').val()) {
          arrdata.push(caozuoData[i])
        } else if ($('#caozuozhanghao').val() == "" && new Date(caozuoData[i].actionTime) >= new Date(kaishiTime) && new Date(caozuoData[i].actionTime) <= new Date(jieshuTime)) {
          arrdata.push(caozuoData[i])
        }
        showPages(arrdata)
        showfenye(1, arrdata)
        $("#jilu").text(arrdata.length)
        $("#dangqian").text(dangqianye)
        $("#zongyema").text(maxPage)
      }
      arrdata = []
    })
    // 重置
    $('#query').prev().click(function () {
      $("#tdheight tbody").html('')
      $('#caozuozhanghao').val('')
      $('#riqi').val('')
      $('#riqi').next().val('')
      showPages(caozuoData)
      showfenye(1, caozuoData)
      $("#jilu").text(caozuoData.length)
      $("#dangqian").text(dangqianye)
      $("#zongyema").text(maxPage)
      $("#pages").children()[0].style.backgroundColor = "#1890FF"
    })
    // 清除
    $("tbody").on('click', '.check', function () {
      if ($(this).is(':checked')) {
        $(this).attr({ 'date-checked': 'true' })
      } else {
        $(this).attr({ 'date-checked': 'flase' })
      }
    })
    $('#qingchu').click(function () {
      let arr = document.querySelectorAll('.check')
      for (let i = 0; i < arr.length; i++) {
        if ($(arr[i]).attr('date-checked') == 'true') {
          let zhanghao = $(arr[i]).parent().parent().children().eq(2).text()
          console.log(zhanghao);
          $(arr[i]).parent().parent().remove()
          for (let j = 0; j < newadminData.length; j++) {
            if (newadminData[j].account == zhanghao) {
              newadminData[j].logID = ""
            }
          }
          caozuoData = []
          fengjin(newadminData)
          showPages(caozuoData)
          showfenye(dangqianye, caozuoData)
          $("#jilu").text(caozuoData.length)
          $("#dangqian").text(dangqianye)
          $("#zongyema").text(maxPage)
          setmyData("administratorData", newadminData)
        }
      }
    })
  </script>
</body>

</html>